<template>
  <view class="roc-template">
    <!-- 加载中 -->
    <u-loading-page :loading="loadingStatus" fontSize="26"></u-loading-page>
    <!-- 回到顶部 -->
    <u-back-top :scroll-top="scrollTop" :top="50" bottom="20"></u-back-top>
    <!-- #ifdef APP-PLUS || H5 -->
    <roc-navbar
      v-if="tableFdList.length && queryfcFieldRules.length"
      :title="urlQuery.menuTitle"
      rightIcon="search"
      rightText="筛选"
      @rightClick="rightClick"
    ></roc-navbar>
    <roc-navbar v-else :title="urlQuery.menuTitle"></roc-navbar>
    <!-- #endif -->
    <!-- #ifndef APP-PLUS || H5 -->
    <roc-navbar :title="urlQuery.menuTitle"></roc-navbar>
    <view class="search-btn" v-if="queryfcFieldRules.length" @click="rightClick">筛选</view>
    <!-- #endif -->
    <view class="search-btn check" @click="tableListChange">切换</view>
    <!-- 筛选 -->
    <roc-search ref="rocSearch" :queryfcFieldRules="queryfcFieldRules" @submitSearch="submitSearch"></roc-search>
    <view class="cont">
      <template v-if="pageBtnNameList.length">
        <view class="add-btn-box" v-if="hasBtnName('add')" @click="handleAdd()">
          <!-- <u-icon name="plus-circle-fill" size="90" color="#3c9cff"></u-icon> -->
        </view>
      </template>
      <view class="main-wrap">
        <!-- 表格模式 -->
        <template v-if="curIndex == 0">
          <view class="roc-table" v-if="tableList.length">
            <uni-table :border="true" :stripe="true">
              <uni-tr>
                <uni-th align="center" v-for="item in tableFdListJson" :key="item.field">
                  <text v-if="item.type == 'input'">
                    {{ item.title }}
                    <text v-if="item.children != undefined && item.children[0].children[0] != ''">
                      ({{ item.children[0].children[0] }})
                    </text>
                  </text>
                  <text v-else>{{ item.title }}</text>
                </uni-th>
                <uni-th align="center" v-if="pageBtnNameList.length">操作</uni-th>
              </uni-tr>
              <uni-tr v-for="row in tableList" :key="row.id">
                <uni-td align="center" v-for="item in tableFdListJson" :key="item.field">
                  <!-- 单元格显示内容处理 -->
                  <template v-if="item.type == 'select' || item.type == 'checkbox'">
                    <text
                      v-for="(vItem, vIndex) in row[item.field].split(',')"
                      :key="vIndex"
                      :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                    >
                      <text v-if="keyValueDatasObj[item.field]">{{ keyValueDatasObj[item.field][vItem] }}</text>
                      <text v-if="vIndex < row[item.field].split(',').length - 1">,</text>
                    </text>
                  </template>
                  <template v-else-if="item.type == 'radio'">
                    <text
                      :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                    >
                      <text v-if="keyValueDatasObj[item.field]">
                        {{ keyValueDatasObj[item.field][row[item.field]] }}
                      </text>
                    </text>
                  </template>
                  <template v-else-if="item.type == 'cascader'">
                    <text
                      v-for="(vItem, vIndex) in row[item.field].split(',')"
                      :key="vIndex"
                      :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                    >
                      <text v-if="keyValueDatasObj[item.field]">{{ keyValueDatasObj[item.field][vItem] }}</text>
                      <text v-if="vIndex < row[item.field].split(',').length - 1">/</text>
                    </text>
                  </template>
                  <!-- 千分位 -->
                  <template
                    v-else-if="
                      item.fieldType == 'int' || (item.type == 'input' && item.props && item.props.type == 'number')
                    "
                  >
                    <text>{{ row[item.field] | kgRule }}</text>
                  </template>
                  <template v-else-if="item.type == 'datePicker'">
                    <text>{{ row[item.field] == '2000-01-01T00:00:00' ? '' : row[item.field] }}</text>
                  </template>
                  <template v-else>
                    <text>{{ row[item.field] }}</text>
                  </template>
                </uni-td>
                <uni-td align="center" v-if="pageBtnNameList.length">
                  <!-- 状态按钮（已完成） -->
                  <roc-btn
                    v-if="
                      hasBtnName('update') &&
                        pageBtnObj['update'].btn_show_List.includes(row[pageBtnObj['update'].btn_show_field])
                    "
                    type="success"
                    :text="pageBtnObj['update'].title"
                    @click.native="handleStatusUpdate(row, 'update')"
                  ></roc-btn>
                  <!-- 发送 -->
                  <roc-btn
                    v-if="
                      hasBtnName('send') &&
                        (pageBtnObj['send'].btn_show == '' ||
                          pageBtnObj['send'].btn_edit_del_send_show_List.includes(
                            row[pageBtnObj['send'].btn_edit_del_send_show_field]
                          ))
                    "
                    type="success"
                    :text="pageBtnObj['send'].title"
                    @click.native="handleSend(row, 'send')"
                  ></roc-btn>
                  <!-- 编辑 -->
                  <roc-btn
                    v-if="
                      hasBtnName('edit') &&
                        (pageBtnObj['edit'].btn_show == '' ||
                          pageBtnObj['edit'].btn_edit_del_send_show_List.includes(
                            row[pageBtnObj['edit'].btn_edit_del_send_show_field]
                          ))
                    "
                    type="primary"
                    :text="pageBtnObj['edit'].title"
                    @click.native="handleEdit(row)"
                  ></roc-btn>
                  <!-- 删除 -->
                  <roc-btn
                    v-if="
                      hasBtnName('del') &&
                        (pageBtnObj['del'].btn_show == '' ||
                          pageBtnObj['del'].btn_edit_del_send_show_List.includes(
                            row[pageBtnObj['del'].btn_edit_del_send_show_field]
                          ))
                    "
                    type="error"
                    :text="pageBtnObj['del'].title"
                    @click.native="handleDel(row)"
                  ></roc-btn>
                  <!-- 详情 -->
                  <roc-btn
                    v-if="hasBtnName('detail')"
                    type="warning"
                    :text="pageBtnObj['detail'].title"
                    @click.native="handleDetail(row)"
                  ></roc-btn>
                  <!-- 查看图片 -->
                  <roc-btn
                    v-if="hasBtnName('images')"
                    :text="pageBtnObj['images'].title"
                    type="primary"
                    @click.native="handleGetImage(row)"
                  ></roc-btn>
                </uni-td>
              </uni-tr>
            </uni-table>
          </view>
        </template>
        <!-- 列表模式 -->
        <template v-if="curIndex == 1">
          <view
            class="roc-list u-p-l-20 u-p-r-20"
            v-if="
              tableFdList.length &&
                (listFdArea1.length || listFdArea2.length || listFdArea3.length || listFdArea4.length)
            "
          >
            <view class="list-item u-p-20" v-for="(row, index) in tableList" :key="row.id">
              <view class="top" v-if="listFdArea1.length || listFdArea2.length">
                <view class="area1">
                  <template v-if="listFdArea1.length">
                    <text v-for="item in listFdArea1" :key="item.field">
                      <!-- 单元格显示内容处理 -->
                      <template v-if="item.type == 'select' || item.type == 'checkbox'">
                        <text class="name">{{ item.title }}:</text>
                        <text
                          v-for="(vItem, vIndex) in row[item.field].split(',')"
                          :key="vIndex"
                          :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                        >
                          <text v-if="keyValueDatasObj[item.field]">{{ keyValueDatasObj[item.field][vItem] }}</text>
                          <text v-if="vIndex < row[item.field].split(',').length - 1">,</text>
                        </text>
                      </template>
                      <template v-else-if="item.type == 'radio'">
                        <text class="name">{{ item.title }}:</text>
                        <text
                          :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                        >
                          <text v-if="keyValueDatasObj[item.field]">
                            {{ keyValueDatasObj[item.field][row[item.field]] }}
                          </text>
                        </text>
                      </template>
                      <template v-else-if="item.type == 'cascader'">
                        <text class="name">{{ item.title }}:</text>
                        <text
                          v-for="(vItem, vIndex) in row[item.field].split(',')"
                          :key="vIndex"
                          :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                        >
                          {{ keyValueDatasObj[item.field] && keyValueDatasObj[item.field][vItem] }}
                          <text v-if="vIndex < row[item.field].split(',').length - 1">/</text>
                        </text>
                      </template>
                      <!-- 千分位 -->
                      <template
                        v-else-if="
                          item.fieldType == 'int' || (item.type == 'input' && item.props && item.props.type == 'number')
                        "
                      >
                        <text class="name">
                          {{ item.title }}
                          <text v-if="item.children != undefined && item.children[0].children[0] != ''">
                            ({{ item.children[0].children[0] }})
                          </text>
                          :
                        </text>
                        <text>{{ row[item.field] | kgRule }}</text>
                      </template>
                      <template v-else-if="item.type == 'datePicker'">
                        <text class="name">{{ item.title }}:</text>
                        <text>{{ row[item.field] == '2000-01-01T00:00:00' ? '' : row[item.field] }}</text>
                      </template>
                      <template v-else>
                        <text class="name">{{ item.title }}:</text>
                        <text>{{ row[item.field] }}</text>
                      </template>
                      <!-- {{ item.title }}: {{ row[item.field] }} -->
                    </text>
                  </template>
                </view>
                <view class="area2" v-if="listFdArea2.length">
                  <text
                    v-for="item in listFdArea2"
                    :key="item.field"
                    :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                  >
                    <!-- 单元格显示内容处理 -->
                    <template v-if="item.type == 'select' || item.type == 'checkbox'">
                      <text class="name">{{ item.title }}:</text>
                      <text
                        v-for="(vItem, vIndex) in row[item.field].split(',')"
                        :key="vIndex"
                        :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                      >
                        <text v-if="keyValueDatasObj[item.field]">{{ keyValueDatasObj[item.field][vItem] }}</text>
                        <text v-if="vIndex < row[item.field].split(',').length - 1">,</text>
                      </text>
                    </template>
                    <template v-else-if="item.type == 'radio'">
                      <text class="name">{{ item.title }}:</text>
                      <text
                        :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                      >
                        <text v-if="keyValueDatasObj[item.field]">
                          {{ keyValueDatasObj[item.field][row[item.field]] }}
                        </text>
                      </text>
                    </template>
                    <template v-else-if="item.type == 'cascader'">
                      <text class="name">{{ item.title }}:</text>
                      <text
                        v-for="(vItem, vIndex) in row[item.field].split(',')"
                        :key="vIndex"
                        :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                      >
                        {{ keyValueDatasObj[item.field] && keyValueDatasObj[item.field][vItem] }}
                        <text v-if="vIndex < row[item.field].split(',').length - 1">/</text>
                      </text>
                    </template>
                    <!-- 千分位 -->
                    <template
                      v-else-if="
                        item.fieldType == 'int' || (item.type == 'input' && item.props && item.props.type == 'number')
                      "
                    >
                      <text class="name">
                        {{ item.title }}
                        <text v-if="item.children != undefined && item.children[0].children[0] != ''">
                          ({{ item.children[0].children[0] }})
                        </text>
                        :
                      </text>
                      <text>{{ row[item.field] | kgRule }}</text>
                    </template>
                    <template v-else-if="item.type == 'datePicker'">
                      <text class="name">{{ item.title }}:</text>
                      <text>{{ row[item.field] == '2000-01-01T00:00:00' ? '' : row[item.field] }}</text>
                    </template>
                    <template v-else>
                      <text class="name">{{ item.title }}:</text>
                      <text>{{ row[item.field] }}</text>
                    </template>
                    <!-- {{ item.title }}: {{ row[item.field] }} -->
                  </text>
                </view>
              </view>
              <view class="center" v-if="listFdArea3.length">
                <view class="area3" v-for="item in listFdArea3" :key="item.field">
                  <!-- 单元格显示内容处理 -->
                  <template v-if="item.type == 'select' || item.type == 'checkbox'">
                    <text class="name">{{ item.title }}:</text>
                    <text
                      v-for="(vItem, vIndex) in row[item.field].split(',')"
                      :key="vIndex"
                      :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                    >
                      <text v-if="keyValueDatasObj[item.field]">{{ keyValueDatasObj[item.field][vItem] }}</text>
                      <text v-if="vIndex < row[item.field].split(',').length - 1">,</text>
                    </text>
                  </template>
                  <template v-else-if="item.type == 'radio'">
                    <text class="name">{{ item.title }}:</text>
                    <text
                      :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                    >
                      <text v-if="keyValueDatasObj[item.field]">
                        {{ keyValueDatasObj[item.field][row[item.field]] }}
                      </text>
                    </text>
                  </template>
                  <template v-else-if="item.type == 'cascader'">
                    <text class="name">{{ item.title }}:</text>
                    <text
                      v-for="(vItem, vIndex) in row[item.field].split(',')"
                      :key="vIndex"
                      :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                    >
                      <text v-if="keyValueDatasObj[item.field]">{{ keyValueDatasObj[item.field][vItem] }}</text>
                      <text v-if="vIndex < row[item.field].split(',').length - 1">/</text>
                    </text>
                  </template>
                  <!-- 千分位 -->
                  <template
                    v-else-if="
                      item.fieldType == 'int' || (item.type == 'input' && item.props && item.props.type == 'number')
                    "
                  >
                    <text class="name">
                      {{ item.title }}
                      <text v-if="item.children != undefined && item.children[0].children[0] != ''">
                        ({{ item.children[0].children[0] }})
                      </text>
                      :
                    </text>
                    <text>{{ row[item.field] | kgRule }}</text>
                  </template>
                  <template v-else-if="item.type == 'datePicker'">
                    <text class="name">{{ item.title }}:</text>
                    <text>{{ row[item.field] == '2000-01-01T00:00:00' ? '' : row[item.field] }}</text>
                  </template>
                  <template v-else>
                    <text class="name">{{ item.title }}:</text>
                    <text>{{ row[item.field] }}</text>
                  </template>
                </view>
              </view>
              <view class="bottom" v-if="listFdArea4.length">
                <view class="area4" v-for="item in listFdArea4" :key="item.field">
                  <!-- 单元格显示内容处理 -->
                  <template v-if="item.type == 'select' || item.type == 'checkbox'">
                    <text class="name">{{ item.title }}:</text>
                    <text
                      v-for="(vItem, vIndex) in row[item.field].split(',')"
                      :key="vIndex"
                      :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                    >
                      <text v-if="keyValueDatasObj[item.field]">{{ keyValueDatasObj[item.field][vItem] }}</text>
                      <text v-if="vIndex < row[item.field].split(',').length - 1">,</text>
                    </text>
                  </template>
                  <template v-else-if="item.type == 'radio'">
                    <text class="name">{{ item.title }}:</text>
                    <text
                      :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                    >
                      <text v-if="keyValueDatasObj[item.field]">
                        {{ keyValueDatasObj[item.field][row[item.field]] }}
                      </text>
                    </text>
                  </template>
                  <template v-else-if="item.type == 'cascader'">
                    <text class="name">{{ item.title }}:</text>
                    <text
                      v-for="(vItem, vIndex) in row[item.field].split(',')"
                      :key="vIndex"
                      :class="keyValueDatasObj[item.field] && keyValueDatasObj[item.field][`class${row[item.field]}`]"
                    >
                      {{ keyValueDatasObj[item.field] && keyValueDatasObj[item.field][vItem] }}
                      <text v-if="vIndex < row[item.field].split(',').length - 1">/</text>
                    </text>
                  </template>
                  <!-- 千分位 -->
                  <template
                    v-else-if="
                      item.fieldType == 'int' || (item.type == 'input' && item.props && item.props.type == 'number')
                    "
                  >
                    <text class="name">
                      {{ item.title }}
                      <text v-if="item.children != undefined && item.children[0].children[0] != ''">
                        ({{ item.children[0].children[0] }})
                      </text>
                      :
                    </text>
                    <text>{{ row[item.field] | kgRule }}</text>
                  </template>
                  <template v-else-if="item.type == 'datePicker'">
                    <text class="name">{{ item.title }}:</text>
                    <text>{{ row[item.field] == '2000-01-01T00:00:00' ? '' : row[item.field] }}</text>
                  </template>
                  <template v-else>
                    <text class="name">{{ item.title }}:</text>
                    <text>{{ row[item.field] }}</text>
                  </template>
                </view>
              </view>
              <view class="btn-box" v-if="pageBtnNameList.length">
                <!-- 状态按钮（已完成） -->
                <roc-btn
                  v-if="
                    hasBtnName('update') &&
                      pageBtnObj['update'].btn_show_List.includes(row[pageBtnObj['update'].btn_show_field])
                  "
                  type="success"
                  :text="pageBtnObj['update'].title"
                  @click.native="handleStatusUpdate(row, 'update')"
                ></roc-btn>
                <!-- 发送 -->
                <roc-btn
                  v-if="
                    hasBtnName('send') &&
                      (pageBtnObj['send'].btn_show == '' ||
                        pageBtnObj['send'].btn_edit_del_send_show_List.includes(
                          row[pageBtnObj['send'].btn_edit_del_send_show_field]
                        ))
                  "
                  type="success"
                  :text="pageBtnObj['send'].title"
                  @click.native="handleSend(row, 'send')"
                ></roc-btn>
                <!-- 编辑 -->
                <roc-btn
                  type="primary"
                  :text="pageBtnObj['edit'].title"
                  v-if="
                    hasBtnName('edit') &&
                      (pageBtnObj['edit'].btn_show == '' ||
                        pageBtnObj['edit'].btn_edit_del_send_show_List.includes(
                          row[pageBtnObj['edit'].btn_edit_del_send_show_field]
                        ))
                  "
                  @click.native="handleEdit(row)"
                ></roc-btn>
                <!-- 删除 -->
                <roc-btn
                  type="error"
                  :text="pageBtnObj['del'].title"
                  v-if="
                    hasBtnName('del') &&
                      (pageBtnObj['del'].btn_show == '' ||
                        pageBtnObj['del'].btn_edit_del_send_show_List.includes(
                          row[pageBtnObj['del'].btn_edit_del_send_show_field]
                        ))
                  "
                  @click.native="handleDel(row)"
                ></roc-btn>
                <!-- 详情 -->
                <roc-btn
                  type="primary"
                  v-if="hasBtnName('detail')"
                  :text="pageBtnObj['detail'].title"
                  @click.native="handleDetail(row)"
                ></roc-btn>
                <!-- 查看图片 -->
                <roc-btn
                  v-if="hasBtnName('images')"
                  :text="pageBtnObj['images'].title"
                  type="primary"
                  @click.native="handleGetImage(row)"
                ></roc-btn>
              </view>
            </view>
          </view>
        </template>
        <view style="text-align: center;padding-top: 100rpx;"  v-if="tableList.length == 0">
          <image src="@/static/img/nullData.png" style="width: 160px;height: 160px;"></image>
          <view>暂无数据</view>
        </view>
        <!-- 分页 -->
        <view class="page-pagination-box" v-if="tableFdList.length">
          <page-pagination
            :total="queryForm.total"
            :pageSize="queryForm.pageSize"
            :currentPage="queryForm.pageNo"
            @change="changeSubPage"
            mode="simple"
            :showAround="true"
          ></page-pagination>
        </view>
      </view>
    </view>
    <!-- 删除 -->
    <u-modal
      :show="modalShow"
      :showCancelButton="true"
      title="删除"
      content="确定删除吗?"
      @confirm="confirm"
      @cancel="close"
      @close="close"
    ></u-modal>
    <!-- 查看图片 -->
    <roc-see-image ref="rocSeeImage"></roc-see-image>
  </view>
</template>

<script>
import { apiapi } from '@/api/request.js';
import pageBtn from '@/mixins/pageBtn.js';
import valueShowName from '@/mixins/valueShowName.js';
import { getModelFieldList, getDetail } from '@/api/model.js';
import { getList, doDelete } from '@/api/dataAccess.js';
import { getListSub, doDelSub } from '@/api/dataSubAccess.js';

import RocSearch from './components/roc-search/roc-search.vue';
import rocSeeImage from './components/roc-see-image/roc-see-image.vue';
export default {
  name: 'roc-template',
  mixins: [pageBtn, valueShowName],
  components: {
    RocSearch,
    rocSeeImage
  },
  props: {
    urlQuery: {
      type: Object,
      default() {
        return {};
      }
    },
    scrollTop: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      delRow: {},
      curIndex: 1,
      modelDetail: {},
      // 表格字段
      tableFdList: [],
      // 区域位 字段
      listFdArea1: [],
      listFdArea2: [],
      listFdArea3: [],
      listFdArea4: [],
      // 数据
      tableList: [],
      tableFdListJson: [],
      queryForm: {
        pageNo: 1,
        pageSize: 15,
        total: 0
      },
      modalShow: false,
      // 需要查询的字段
      queryfcFieldRules: [],
      queryFormData: {},
      // 辅助
      loadingStatus: false
    };
  },
  async created() {
    if (this.urlQuery.modelId) {
      await this.getField();
      await this.fetchData();
      // 监听刷新数据
      uni.$on('refreshData', () => {
        this.fetchData();
      });
    }
  },
  methods: {
    // 更新状态(已完成...在按钮菜单配置)
    async handleStatusUpdate(row, btnName) {
      const that = this;
      uni.showModal({
        title: '提示',
        content: `确定${this.pageBtnObj[btnName].title}吗`,
        success: function(res) {
          if (res.confirm) {
            const newRow = JSON.parse(JSON.stringify(row));
            // 更改菜单配置的字段值
            newRow[that.pageBtnObj[btnName].btn_show_field] = that.pageBtnObj[btnName].btn_show_field_val;
            let sendObj = {
              id: newRow.id,
              code: that.modelDetail.code
            };
            if (that.modelDetail.sub_table) {
              // 有子表
              sendObj['sub_code'] = that.modelDetail.sub_table;
              sendObj['sub_list'] = JSON.stringify(newRow.sub_list);
              if (newRow.sub_list) delete newRow.sub_list;
            }
            sendObj['list'] = JSON.stringify(newRow);
            const apiUrlList = that.pageBtnObj[btnName].guard;
            if (!apiUrlList.length) {
              that.$u.toast('api未配置');
              return;
            }
            const api = apiUrlList[0].replace('.', '::');
            apiapi(`/api.php?_=${api}`, 'POST', sendObj).then(({ data: { msg } }) => {
              that.fetchData();
              that.$u.toast(msg);
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    // 发送
    async handleSend(row, btnName) {
      const that = this;
      uni.showModal({
        title: '提示',
        content: `确定${this.pageBtnObj[btnName].title}吗`,
       	success: function(res) {
      		  if (res.confirm) {
            const newRow = JSON.parse(JSON.stringify(row));
            let sendObj = {
              code: that.modelDetail.code,
              id: newRow.id
            };
            const apiUrlList = that.pageBtnObj[btnName].guard;
            if (!apiUrlList.length) {
              that.$u.toast('api未配置');
              return;
            }
            const api = apiUrlList[0].replace('.', '::');
            apiapi(`/api.php?_=${api}`, 'POST', sendObj).then(({ data: { msg } }) => {
              that.fetchData();
              that.$u.toast(msg);
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    // 查看图片
    handleGetImage(row) {
      this.$refs['rocSeeImage'].handleOpen(row, this.modelDetail);
    },
    // 筛选功能
    submitSearch(queryFormData) {
      this.queryForm.pageNo = 1;
      this.queryFormData = queryFormData;
      this.fetchData();
    },
    close() {
      this.modalShow = false;
    },
    // 确定删除
    async confirm() {
      if (this.modelDetail.sub_table) {
        // 有子表
        const sendObj = {
          code: this.modelDetail.code,
          sub_code: this.modelDetail.sub_table,
          id: this.delRow.id
        };
        const {
          data: { msg }
        } = await doDelSub(sendObj);
        this.$u.toast(msg);
      } else {
        // 无子表
        const sendObj = {
          code: this.modelDetail.code,
          id: this.delRow.id
        };
        const {
          data: { msg }
        } = await doDelete(sendObj);
        this.$u.toast(msg);
      }
      await this.fetchData();
      this.modalShow = false;
    },
    // 编辑
    handleEdit(row) {
      uni.setStorageSync('editRowData', row);
      uni.navigateTo({
        url: `/pages/templatePage/formEdit?menuTitle=${this.urlQuery.menuTitle}&modelId=${this.urlQuery.modelId}&code=${
          this.modelDetail.code
        }&rowId=${row.id}`
      });
    },
    // 删除
    handleDel(row) {
      this.delRow = row;
      this.modalShow = true;
    },
    // 详情
    handleDetail(row) {
      uni.navigateTo({
        url: `/pages/templatePage/details?menuTitle=${this.urlQuery.menuTitle}&id=${row.id}&code=${
          this.modelDetail.code
        }&modelId=${this.urlQuery.modelId}&subTable=${this.modelDetail.sub_table}`
      });
    },
    // 页数改变
    changeSubPage(pageNo) {
      this.queryForm.pageNo = pageNo;
      this.fetchData();
    },
    // 请求字段
    async getField() {
      const {
        data: { data }
      } = await getModelFieldList({ model_id: this.urlQuery.modelId });
      const newData = data
        .map(fieldObj => {
          fieldObj.attr_json = JSON.parse(fieldObj.attr_json);
          fieldObj.label = fieldObj.name;
          fieldObj.key = fieldObj.code;
          // 判断是否有props，没有则加上（防止使用数据item.props.xxx报错）
          if (!fieldObj.attr_json.hasOwnProperty('props')) {
            fieldObj.attr_json.props = {};
          }
          // 级联选择器 判断是否有props.props，没有则加上（防止使用数据item.props.props.xxx报错）
          if (fieldObj.attr_json.type == 'cascader') {
            if (!fieldObj.attr_json.props.hasOwnProperty('props')) {
              fieldObj.attr_json.props.props = {};
            }
          }
          return fieldObj;
        })
        .reverse();
      /* 模型设置隐藏字段 */
      const listShowData = newData.filter(fieldObj => {
        return fieldObj.list_hide == '0';
      });
      this.tableFdList = listShowData.filter(fieldObj => {
        const item = fieldObj.attr_json;
        // 列表不显示的组件
        if (item.type != 'fc-editor' && item.type != 'upload' && item.type != 'tree') {
          if (item.fieldType) {
            return item;
          }
        }
      });
      /* fcjson提取 表格列表应用 */
      this.tableFdListJson = this.tableFdList.map(item => item.attr_json);
      // 使用mixin方法（获取字段api数据）
      this.getFieldApiData(this.tableFdListJson);
      /* 查询字段提取 */
      // 过滤列表隐藏的字段
      this.queryfcFieldRules = newData
        .filter(item => {
          return item.list_hide == '0';
        })
        .filter(field => {
          return field.is_search == '1' || field.is_range == '1';
        });
      /* 列表视图 区域字段提取 */
      this.listFdArea1 = this.tableFdList
        .filter(fieldObj => {
          return fieldObj.area1 == '1';
        })
        .map(item => item.attr_json);
      this.listFdArea2 = this.tableFdList
        .filter(fieldObj => {
          return fieldObj.area2 == '1';
        })
        .map(item => item.attr_json);
      this.listFdArea3 = this.tableFdList
        .filter(fieldObj => {
          return fieldObj.area3 == '1';
        })
        .map(item => item.attr_json);
      this.listFdArea4 = this.tableFdList
        .filter(fieldObj => {
          return fieldObj.area4 == '1';
        })
        .map(item => item.attr_json);
    },
    // 请求数据
    async fetchData() {
      this.loadingStatus = true;
      // 获取详情
      const {
        data: { data: detail }
      } = await getDetail({ id: this.urlQuery.modelId });
      this.modelDetail = detail;
	  console.log("modelDetail============>",this.modelDetail)
      // 请求数据
      if (this.modelDetail.sub_table) {
        // 有子表
        const sendObj = {
          code: this.modelDetail.code,
          sub_code: this.modelDetail.sub_table,
          search: JSON.stringify(this.queryFormData),
          page: this.queryForm.pageNo,
          page_size: this.queryForm.pageSize
        };
        const {
          data: {
            data: { list: dataList, total }
          }
        } = await getListSub(sendObj);
        this.tableList = dataList;
        this.queryForm.total = parseInt(total);
      } else {
        // 无子表
        const sendObj = {
          code: this.modelDetail.code,
          search: JSON.stringify(this.queryFormData),
          page: this.queryForm.pageNo,
          page_size: this.queryForm.pageSize
        };
        const {
          data: {
            data: { list: dataList, total }
          }
        } = await getList(sendObj);
        this.tableList = dataList;
        this.queryForm.total = parseInt(total);
      }
      this.loadingStatus = false;
    },
    // 点击筛选
    rightClick() {
      this.$refs.rocSearch.open();
    },
    // 表格列表切换
    tableListChange() {
      if (this.curIndex == 0) {
        this.curIndex = 1;
      } else {
        this.curIndex = 0;
      }
    },
    // 添加
    handleAdd() {
      uni.navigateTo({
        url: `/pages/templatePage/formEdit?menuTitle=${this.urlQuery.menuTitle}&modelId=${this.urlQuery.modelId}&code=${
          this.modelDetail.code
        }`
      });
    }
  }
};
</script>

<style lang="scss">
.search-btn {
  position: fixed;
  z-index: 999;
  right: 20rpx;
  bottom: 290rpx;
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  background-color: #3d9ffc;
  opacity: 0.8;
  &.check {
    right: 20rpx;
    bottom: 200rpx;
  }
}
.main-wrap {
  margin-top: 20rpx;
}
.add-btn-box {
  position: fixed;
  bottom: 110rpx;
  right: 20rpx;
  width: 80rpx;
  height: 80rpx;
  background: url(@/static/img/add.png) no-repeat;
  background-size: 80rpx 80rpx;
  border-radius: 50%;
  z-index: 99;
  opacity: 0.8;
}
.btn-box {
  margin-top: 20rpx;
}
.page-pagination-box {
  padding: 30rpx 0;
}
// 列表模式
.roc-list {
  $titleFontSize: 32rpx;
  $contFontSize: 26rpx;
  .list-item {
    margin-top: 20rpx;
    border: 1px solid #ebeef5;
    border-radius: 10rpx;
    background-color: #fff;
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
    .name {
      margin-right: 6rpx;
    }
    .top,
    .center,
    .bottom {
      display: flex;
      justify-content: space-between;
      .area3,
      .area4 {
        width: 48%;
      }
    }
    .top {
      .area1 {
        font-size: $titleFontSize;
      }
      .area2 {
        margin-left: 10rpx;
      }
    }
    .center {
      flex-wrap: wrap;
      margin-top: 20rpx;
      padding-bottom: 10rpx;
      .area3 {
        color: #333;
        line-height: 2;
        font-size: $contFontSize;
      }
    }
    .bottom {
      flex-wrap: wrap;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      padding-top: 20rpx;
      .area4 {
        color: #888;
        font-size: $contFontSize;
      }
    }
    .btn-box {
      width: 100%;
      padding-top: 20rpx;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      text-align: right;
    }
  }
}
</style>
